<template>
	<!--横竖屏判断-->
	<Orientati @onOrientationchange="onOrientationchange" />
	<!--loading-->
	<Loading v-model:show="loadComplete" v-if="isHengPing && !loadComplete" />
	<template v-if="!showGame">
		<!--场景1 开场动画-->
		<FirstAction v-model:show="FirstActionEnd" v-if="!FirstActionEnd" />
		<!--首页-->
		<Index v-if="showIndex && !showModule" @startGame="startGame" />
		<!--角色选择-->
		<RoleSelect v-if="showRole" @chooseRole="chooseRole" />
		<!--模块选择-->
		<ModuleSelect v-if="showModule" @chooseModule="chooseModule" />
	</template>
	<Game v-else ref="GameBox" />
</template>
<script setup>
import { ref, onMounted, watch, nextTick } from "vue";
import Loading from "./components/Loading.vue";
import FirstAction from "./components/FirstAction.vue";
import Orientati from "./components/Orientati.vue";
import Index from "./components/Index.vue";
import RoleSelect from "./components/RoleSelect.vue";
import ModuleSelect from "./components/ModuleSelect.vue";
import Game from "./components/Game.vue";
//横竖屏检查
const isHengPing = ref(false);
const onOrientationchange = (val) => {
	isHengPing.value = !val;
};

//加载页控制
const loadComplete = ref(false);
watch(loadComplete, (newValue, oldValue) => {
  document.getElementById("bgMusic").play()
	//加载资源一结束立即开始开场动画
	if (newValue) {
		FirstActionEnd.value = false;
	}
});

const FirstActionEnd = ref(true);

//首页控制
const showIndex = ref(false);
watch(FirstActionEnd, (newValue, oldValue) => {
	if (newValue) {
		showIndex.value = true;
	}
});

//角色选择面板控制
const showRole = ref(false);

//点击开始游戏 进入角色选择
const startGame = () => {
	showIndex.value = false;
	showRole.value = true;
};

//选择角色
const chooseRole = () => {
	showRole.value = false;
	showModule.value = true;
};

//选择模块页面
const showModule = ref(false);

//正式游戏界面
const showGame = ref(false);
const GameBox = ref(null);
const chooseModule = () => {
	showGame.value = true;
	showModule.value = false;
};

//全局控制
window.toIndex = () => {
	loadComplete.value = true;
	nextTick(() => {
		FirstActionEnd.value = true;
	});
	showModule.value = false;
	showGame.value = false;
	showIndex.value = true;
};
window.toSelectModule = () => {
  loadComplete.value = true;
	nextTick(() => {
		FirstActionEnd.value = true;
	});
	showGame.value = false;
	showModule.value = true;
};

window.toPrev = () => {
	if (showGame.value == true) {
		GameBox.value.step--;
		if (GameBox.value.step == 0) {
			loadComplete.value = true;
			showGame.value = false;
			showModule.value = true;
			nextTick(() => {
				FirstActionEnd.value = true;
				showIndex.value = false;
				showRole.value = false;
			});
		}
	} else if (showModule.value == true) {
		showModule.value = false;
		showRole.value = true;
	}
};
</script>
<style></style>
